<!DOCTYPE html>
<!-- Template Name: Clip-Two - Responsive Admin Template build with Twitter Bootstrap 3.x | Author: ClipTheme -->
<!--[if IE 8]><html class="ie8" lang="en"><![endif]-->
<!--[if IE 9]><html class="ie9" lang="en"><![endif]-->
<!--[if !IE]><!-->
<html lang="en">
	<!--<![endif]-->
	<!-- start: HEAD -->
	<head>
		<title>Clip-Two - Responsive Admin Template</title>
		<!-- start: META -->
		<!--[if IE]><meta http-equiv='X-UA-Compatible' content="IE=edge,IE=9,IE=8,chrome=1" /><![endif]-->
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta content="" name="description" />
		<meta content="" name="author" />
		<!-- end: META -->
		<!-- start: GOOGLE FONTS -->
		<link href="http://fonts.googleapis.com/css?family=Lato:300,400,400italic,600,700|Raleway:300,400,500,600,700|Crete+Round:400italic" rel="stylesheet" type="text/css" />
		<!-- end: GOOGLE FONTS -->
		<!-- start: MAIN CSS -->
		<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css">
		<link rel="stylesheet" href="vendor/fontawesome/css/font-awesome.min.css">
		<link rel="stylesheet" href="vendor/themify-icons/themify-icons.min.css">
		<link href="vendor/animate.css/animate.min.css" rel="stylesheet" media="screen">
		<link href="vendor/perfect-scrollbar/perfect-scrollbar.min.css" rel="stylesheet" media="screen">
		<link href="vendor/switchery/switchery.min.css" rel="stylesheet" media="screen">
		<!-- end: MAIN CSS -->
		<!-- start: CLIP-TWO CSS -->
		<link rel="stylesheet" href="assets/css/styles.css">
		<link rel="stylesheet" href="assets/css/plugins.css">
		<link rel="stylesheet" href="assets/css/themes/theme-1.css" id="skin_color" />
		<!-- end: CLIP-TWO CSS -->
		<!-- start: CSS REQUIRED FOR THIS PAGE ONLY -->
		<link href="vendor/bootstrap-progressbar/bootstrap-progressbar-3.3.0.min.css" rel="stylesheet" media="screen">
		<link href="vendor/bootstrap-rating/bootstrap-rating.css" rel="stylesheet" media="screen">
		<!-- end: CSS REQUIRED FOR THIS PAGE ONLY -->
	</head>
	<!-- end: HEAD -->
	<body>
		<div id="app">
			<!-- sidebar -->
			<div class="sidebar app-aside" id="sidebar">
				<div class="sidebar-container perfect-scrollbar">
					<nav>
						<!-- start: SEARCH FORM -->
						<div class="search-form">
							<a class="s-open" href="#">
								<i class="ti-search"></i>
							</a>
							<form class="navbar-form" role="search">
								<a class="s-remove" href="#" target=".navbar-form">
									<i class="ti-close"></i>
								</a>
								<div class="form-group">
									<input type="text" class="form-control" placeholder="Search...">
									<button class="btn search-button" type="submit">
										<i class="ti-search"></i>
									</button>
								</div>
							</form>
						</div>
						<!-- end: SEARCH FORM -->
						<!-- start: MAIN NAVIGATION MENU -->
						<div class="navbar-title">
							<span>Main Navigation</span>
						</div>
						<ul class="main-navigation-menu">
							<li>
								<a href="index.html">
									<div class="item-content">
										<div class="item-media">
											<i class="ti-home"></i>
										</div>
										<div class="item-inner">
											<span class="title"> Dashboard </span>
										</div>
									</div>
								</a>
							</li>
							<li class="active open">
								<a href="javascript:void(0)">
									<div class="item-content">
										<div class="item-media">
											<i class="ti-settings"></i>
										</div>
										<div class="item-inner">
											<span class="title"> UI Elements </span><i class="icon-arrow"></i>
										</div>
									</div>
								</a>
								<ul class="sub-menu">
									<li class="active">
										<a href="ui_elements.html">
											<span class="title"> Elements </span>
										</a>
									</li>
									<li>
										<a href="ui_buttons.html">
											<span class="title"> Buttons </span>
										</a>
									</li>
									<li>
										<a href="ui_links.html">
											<span class="title"> Links </span>
										</a>
									</li>
									<li>
										<a href="ui_icons.html">
											<span class="title"> Font Awesome Icons </span>
										</a>
									</li>
									<li>
										<a href="ui_line_icons.html">
											<span class="title"> Linear Icons </span>
										</a>
									</li>
									<li>
										<a href="ui_modals.html">
											<span class="title"> Modals </span>
										</a>
									</li>
									<li>
										<a href="ui_toggle.html">
											<span class="title"> Toggle </span>
										</a>
									</li>
									<li>
										<a href="ui_tabs_accordions.html">
											<span class="title"> Tabs &amp; Accordions </span>
										</a>
									</li>
									<li>
										<a href="ui_panels.html">
											<span class="title"> Panels </span>
										</a>
									</li>
									<li>
										<a href="ui_notifications.html">
											<span class="title"> Notifications </span>
										</a>
									</li>
									<li>
										<a href="ui_treeview.html">
											<span class="title"> Treeview </span>
										</a>
									</li>
									<li>
										<a href="ui_media.html">
											<span class="title"> Media Object </span>
										</a>
									</li>
									<li>
										<a href="ui_nestable.html">
											<span class="title"> Nestable List </span>
										</a>
									</li>
									<li>
										<a href="ui_typography.html">
											<span class="title"> Typography </span>
										</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="javascript:void(0)">
									<div class="item-content">
										<div class="item-media">
											<i class="ti-layout-grid2"></i>
										</div>
										<div class="item-inner">
											<span class="title"> Tables </span><i class="icon-arrow"></i>
										</div>
									</div>
								</a>
								<ul class="sub-menu">
									<li>
										<a href="table_basic.html">
											<span class="title">Basic Tables</span>
										</a>
									</li>
									<li>
										<a href="table_responsive.html">
											<span class="title">Responsive Tables</span>
										</a>
									</li>
									<li>
										<a href="table_data.html">
											<span class="title">Advanced Data Tables</span>
										</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="javascript:void(0)">
									<div class="item-content">
										<div class="item-media">
											<i class="ti-pencil-alt"></i>
										</div>
										<div class="item-inner">
											<span class="title"> Forms </span><i class="icon-arrow"></i>
										</div>
									</div>
								</a>
								<ul class="sub-menu">
									<li>
										<a href="form_elements.html">
											<span class="title">Form Elements</span>
										</a>
									</li>									
									<li>
										<a href="form_text_editor.html">
											<span class="title">Text Editor</span>
										</a>
									</li>
									<li>
										<a href="form_wizard.html">
											<span class="title">Form Wizard</span>
										</a>
									</li>
									<li>
										<a href="form_validation.html">
											<span class="title">Form Validation</span>
										</a>
									</li>
									<li>
										<a href="form_image_cropping.html">
											<span class="title">Image Cropping</span>
										</a>
									</li>
									<li>
										<a href="form_multiple_upload.html">
											<span class="title">Multiple File Upload</span>
										</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="javascript:void(0)">
									<div class="item-content">
										<div class="item-media">
											<i class="ti-user"></i>
										</div>
										<div class="item-inner">
											<span class="title"> Login </span><i class="icon-arrow"></i>
										</div>
									</div>
								</a>
								<ul class="sub-menu">
									<li>
										<a href="login_signin.html">
											<span class="title"> Login Form </span>
										</a>
									</li>
									<li>
										<a href="login_registration.html">
											<span class="title"> Registration Form </span>
										</a>
									</li>
									<li>
										<a href="login_forgot.html">
											<span class="title"> Forgot Password Form </span>
										</a>
									</li>
									<li>
										<a href="login_lockscreen.html">
											<span class="title">Lock Screen</span>
										</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="javascript:void(0)">
									<div class="item-content">
										<div class="item-media">
											<i class="ti-layers-alt"></i>
										</div>
										<div class="item-inner">
											<span class="title"> Pages </span><i class="icon-arrow"></i>
										</div>
									</div>
								</a>
								<ul class="sub-menu">
									<li>
										<a href="pages_user_profile.html">
											<span class="title">User Profile</span>
										</a>
									</li>
									<li>
										<a href="pages_invoice.html">
											<span class="title">Invoice</span>
										</a>
									</li>
									<li>
										<a href="pages_timeline.html">
											<span class="title">Timeline</span>
										</a>
									</li>
									<li>
										<a href="pages_calendar.html">
											<span class="title">Calendar</span>
										</a>
									</li>
									<li>
										<a href="pages_messages.html">
											<span class="title">Messages</span>
										</a>
									</li>
									<li>
										<a href="pages_blank_page.html">
											<span class="title">Blank Page</span>
										</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="javascript:void(0)">
									<div class="item-content">
										<div class="item-media">
											<i class="ti-package"></i>
										</div>
										<div class="item-inner">
											<span class="title"> Utilities </span><i class="icon-arrow"></i>
										</div>
									</div>
								</a>
								<ul class="sub-menu">
									<li>
										<a href="utilities_search_result.html">
											<span class="title">Search Results</span>
										</a>
									</li>
									<li>
										<a href="utilities_error_404.html">
											<span class="title">Error 404</span>
										</a>
									</li>
									<li>
										<a href="utilities_error_500.html">
											<span class="title">Error 500</span>
										</a>
									</li>
									<li>
										<a href="utilities_pricing_table.html">
											<span class="title">Pricing Table</span>
										</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="javascript:void(0)">
									<div class="item-content">
										<div class="item-media">
											<i class="ti-folder"></i>
										</div>
										<div class="item-inner">
											<span class="title"> 3 Level Menu </span><i class="icon-arrow"></i>
										</div>
									</div>
								</a>
								<ul class="sub-menu">
									<li>
										<a href="javascript:;">
											<span>Item 1</span> <i class="icon-arrow"></i>
										</a>
										<ul class="sub-menu">
											<li>
												<a href="#">
													Sample Link 1
												</a>
											</li>
											<li>
												<a href="#">
													Sample Link 2
												</a>
											</li>
											<li>
												<a href="#">
													Sample Link 3
												</a>
											</li>
										</ul>
									</li>
									<li>
										<a href="javascript:;">
											<span>Item 2</span> <i class="icon-arrow"></i>
										</a>
										<ul class="sub-menu">
											<li>
												<a href="#">
													Sample Link 1
												</a>
											</li>
											<li>
												<a href="#">
													Sample Link 2
												</a>
											</li>
											<li>
												<a href="#">
													Sample Link 3
												</a>
											</li>
										</ul>
									</li>
									<li>
										<a href="javascript:;">
											<span>Item 3</span> <i class="icon-arrow"></i>
										</a>
										<ul class="sub-menu">
											<li>
												<a href="#">
													Sample Link 1
												</a>
											</li>
											<li>
												<a href="#">
													Sample Link 2
												</a>
											</li>
											<li>
												<a href="#">
													Sample Link 3
												</a>
											</li>
										</ul>
									</li>
								</ul>
							</li>
							<li>
								<a href="javascript:void(0)">
									<div class="item-content">
										<div class="item-media">
											<i class="ti-menu-alt"></i>
										</div>
										<div class="item-inner">
											<span class="title"> 4 Level Menu </span><i class="icon-arrow"></i>
										</div>
									</div>
								</a>
								<ul class="sub-menu">
									<li>
										<a href="javascript:;">
											<span>Item 1</span> <i class="icon-arrow"></i>
										</a>
										<ul class="sub-menu">
											<li>
												<a href="javascript:;">
													<span>Sample Link 1</span> <i class="icon-arrow"></i>
												</a>
												<ul class="sub-menu">
													<li>
														<a href="#">
															Sample Link 1
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 2
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 3
														</a>
													</li>
												</ul>
											</li>
											<li>
												<a href="javascript:;">
													<span>Sample Link 2</span> <i class="icon-arrow"></i>
												</a>
												<ul class="sub-menu">
													<li>
														<a href="#">
															Sample Link 1
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 2
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 3
														</a>
													</li>
												</ul>
											</li>
											<li>
												<a href="javascript:;">
													<span>Sample Link 3</span> <i class="icon-arrow"></i>
												</a>
												<ul class="sub-menu">
													<li>
														<a href="#">
															Sample Link 1
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 2
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 3
														</a>
													</li>
												</ul>
											</li>
										</ul>
									</li>
									<li>
										<a href="javascript:;">
											<span>Item 2</span> <i class="icon-arrow"></i>
										</a>
										<ul class="sub-menu">
											<li>
												<a href="javascript:;">
													<span>Sample Link 1</span> <i class="icon-arrow"></i>
												</a>
												<ul class="sub-menu">
													<li>
														<a href="#">
															Sample Link 1
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 2
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 3
														</a>
													</li>
												</ul>
											</li>
											<li>
												<a href="javascript:;">
													<span>Sample Link 2</span> <i class="icon-arrow"></i>
												</a>
												<ul class="sub-menu">
													<li>
														<a href="#">
															Sample Link 1
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 2
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 3
														</a>
													</li>
												</ul>
											</li>
											<li>
												<a href="javascript:;">
													<span>Sample Link 3</span> <i class="icon-arrow"></i>
												</a>
												<ul class="sub-menu">
													<li>
														<a href="#">
															Sample Link 1
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 2
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 3
														</a>
													</li>
												</ul>
											</li>
										</ul>
									</li>
									<li>
										<a href="javascript:;">
											<span>Item 3</span> <i class="icon-arrow"></i>
										</a>
										<ul class="sub-menu">
											<li>
												<a href="javascript:;">
													<span>Sample Link 1</span> <i class="icon-arrow"></i>
												</a>
												<ul class="sub-menu">
													<li>
														<a href="#">
															Sample Link 1
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 2
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 3
														</a>
													</li>
												</ul>
											</li>
											<li>
												<a href="javascript:;">
													<span>Sample Link 2</span> <i class="icon-arrow"></i>
												</a>
												<ul class="sub-menu">
													<li>
														<a href="#">
															Sample Link 1
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 2
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 3
														</a>
													</li>
												</ul>
											</li>
											<li>
												<a href="javascript:;">
													<span>Sample Link 3</span> <i class="icon-arrow"></i>
												</a>
												<ul class="sub-menu">
													<li>
														<a href="#">
															Sample Link 1
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 2
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 3
														</a>
													</li>
												</ul>
											</li>
										</ul>
									</li>
								</ul>
							</li>
							<li>
								<a href="maps.html">
									<div class="item-content">
										<div class="item-media">
											<i class="ti-location-pin"></i>
										</div>
										<div class="item-inner">
											<span class="title"> Maps </span>
										</div>
									</div>
								</a>
							</li>
							<li>
								<a href="charts.html">
									<div class="item-content">
										<div class="item-media">
											<i class="ti-pie-chart"></i>
										</div>
										<div class="item-inner">
											<span class="title"> Charts </span>
										</div>
									</div>
								</a>
							</li>
						</ul>
						<!-- end: MAIN NAVIGATION MENU -->
						<!-- start: CORE FEATURES -->
						<div class="navbar-title">
							<span>Core Features</span>
						</div>
						<ul class="folders">
							<li>
								<a href="pages_calendar.html">
									<div class="item-content">
										<div class="item-media">
											<span class="fa-stack"> <i class="fa fa-square fa-stack-2x"></i> <i class="fa fa-terminal fa-stack-1x fa-inverse"></i> </span>
										</div>
										<div class="item-inner">
											<span class="title"> Calendar </span>
										</div>
									</div>
								</a>
							</li>
							<li>
								<a href="pages_messages.html">
									<div class="item-content">
										<div class="item-media">
											<span class="fa-stack"> <i class="fa fa-square fa-stack-2x"></i> <i class="fa fa-folder-open-o fa-stack-1x fa-inverse"></i> </span>
										</div>
										<div class="item-inner">
											<span class="title"> Messages </span>
										</div>
									</div>
								</a>
							</li>
						</ul>
						<!-- end: CORE FEATURES -->
						<!-- start: DOCUMENTATION BUTTON -->
						<div class="wrapper">
							<a href="documentation.html" class="button-o">
								<i class="ti-help"></i>
								<span>Documentation</span>
							</a>
						</div>
						<!-- end: DOCUMENTATION BUTTON -->
					</nav>
				</div>
			</div>
			<!-- / sidebar -->
			<div class="app-content">
				<!-- start: TOP NAVBAR -->
				<header class="navbar navbar-default navbar-static-top">
					<!-- start: NAVBAR HEADER -->
					<div class="navbar-header">
						<a href="#" class="sidebar-mobile-toggler pull-left hidden-md hidden-lg" class="btn btn-navbar sidebar-toggle" data-toggle-class="app-slide-off" data-toggle-target="#app" data-toggle-click-outside="#sidebar">
							<i class="ti-align-justify"></i>
						</a>
						<a class="navbar-brand" href="#">
							<img src="assets/images/logo.png" alt="Clip-Two"/>
						</a>
						<a href="#" class="sidebar-toggler pull-right visible-md visible-lg" data-toggle-class="app-sidebar-closed" data-toggle-target="#app">
							<i class="ti-align-justify"></i>
						</a>
						<a class="pull-right menu-toggler visible-xs-block" id="menu-toggler" data-toggle="collapse" href=".navbar-collapse">
							<span class="sr-only">Toggle navigation</span>
							<i class="ti-view-grid"></i>
						</a>
					</div>
					<!-- end: NAVBAR HEADER -->
					<!-- start: NAVBAR COLLAPSE -->
					<div class="navbar-collapse collapse">
						<ul class="nav navbar-right">
							<!-- start: MESSAGES DROPDOWN -->
							<li class="dropdown">
								<a href class="dropdown-toggle" data-toggle="dropdown">
									<span class="dot-badge partition-red"></span> <i class="ti-comment"></i> <span>MESSAGES</span>
								</a>
								<ul class="dropdown-menu dropdown-light dropdown-messages dropdown-large">
									<li>
										<span class="dropdown-header"> Unread messages</span>
									</li>
									<li>
										<div class="drop-down-wrapper ps-container">
											<ul>
												<li class="unread">
													<a href="javascript:;" class="unread">
														<div class="clearfix">
															<div class="thread-image">
																<img src="./assets/images/avatar-2.jpg" alt="">
															</div>
															<div class="thread-content">
																<span class="author">Nicole Bell</span>
																<span class="preview">Duis mollis, est non commodo luctus, nisi erat porttitor ligula...</span>
																<span class="time"> Just Now</span>
															</div>
														</div>
													</a>
												</li>
												<li>
													<a href="javascript:;" class="unread">
														<div class="clearfix">
															<div class="thread-image">
																<img src="./assets/images/avatar-3.jpg" alt="">
															</div>
															<div class="thread-content">
																<span class="author">Steven Thompson</span>
																<span class="preview">Duis mollis, est non commodo luctus, nisi erat porttitor ligula...</span>
																<span class="time">8 hrs</span>
															</div>
														</div>
													</a>
												</li>
												<li>
													<a href="javascript:;">
														<div class="clearfix">
															<div class="thread-image">
																<img src="./assets/images/avatar-5.jpg" alt="">
															</div>
															<div class="thread-content">
																<span class="author">Kenneth Ross</span>
																<span class="preview">Duis mollis, est non commodo luctus, nisi erat porttitor ligula...</span>
																<span class="time">14 hrs</span>
															</div>
														</div>
													</a>
												</li>
											</ul>
										</div>
									</li>
									<li class="view-all">
										<a href="#">
											See All
										</a>
									</li>
								</ul>
							</li>
							<!-- end: MESSAGES DROPDOWN -->
							<!-- start: ACTIVITIES DROPDOWN -->
							<li class="dropdown">
								<a href class="dropdown-toggle" data-toggle="dropdown">
									<i class="ti-check-box"></i> <span>ACTIVITIES</span>
								</a>
								<ul class="dropdown-menu dropdown-light dropdown-messages dropdown-large">
									<li>
										<span class="dropdown-header"> You have new notifications</span>
									</li>
									<li>
										<div class="drop-down-wrapper ps-container">
											<div class="list-group no-margin">
												<a class="media list-group-item" href="">
													<img class="img-circle" alt="..." src="assets/images/avatar-1.jpg">
													<span class="media-body block no-margin"> Use awesome animate.css <small class="block text-grey">10 minutes ago</small> </span>
												</a>
												<a class="media list-group-item" href="">
													<span class="media-body block no-margin"> 1.0 initial released <small class="block text-grey">1 hour ago</small> </span>
												</a>
											</div>
										</div>
									</li>
									<li class="view-all">
										<a href="#">
											See All
										</a>
									</li>
								</ul>
							</li>
							<!-- end: ACTIVITIES DROPDOWN -->
							<!-- start: LANGUAGE SWITCHER -->
							<li class="dropdown">
								<a href class="dropdown-toggle" data-toggle="dropdown">
									<i class="ti-world"></i> English
								</a>
								<ul role="menu" class="dropdown-menu dropdown-light fadeInUpShort">
									<li>
										<a href="#" class="menu-toggler">
											Deutsch
										</a>
									</li>
									<li>
										<a href="#" class="menu-toggler">
											English
										</a>
									</li>
									<li>
										<a href="#" class="menu-toggler">
											Italiano
										</a>
									</li>
								</ul>
							</li>
							<!-- start: LANGUAGE SWITCHER -->
							<!-- start: USER OPTIONS DROPDOWN -->
							<li class="dropdown current-user">
								<a href class="dropdown-toggle" data-toggle="dropdown">
									<img src="assets/images/avatar-1.jpg" alt="Peter"> <span class="username">Peter <i class="ti-angle-down"></i></i></span>
								</a>
								<ul class="dropdown-menu dropdown-dark">
									<li>
										<a href="pages_user_profile.html">
											My Profile
										</a>
									</li>
									<li>
										<a href="pages_calendar.html">
											My Calendar
										</a>
									</li>
									<li>
										<a hef="pages_messages.html">
											My Messages (3)
										</a>
									</li>
									<li>
										<a href="login_lockscreen.html">
											Lock Screen
										</a>
									</li>
									<li>
										<a href="login_signin.html">
											Log Out
										</a>
									</li>
								</ul>
							</li>
							<!-- end: USER OPTIONS DROPDOWN -->
						</ul>
						<!-- start: MENU TOGGLER FOR MOBILE DEVICES -->
						<div class="close-handle visible-xs-block menu-toggler" data-toggle="collapse" href=".navbar-collapse">
							<div class="arrow-left"></div>
							<div class="arrow-right"></div>
						</div>
						<!-- end: MENU TOGGLER FOR MOBILE DEVICES -->
					</div>
					<a class="dropdown-off-sidebar" data-toggle-class="app-offsidebar-open" data-toggle-target="#app" data-toggle-click-outside="#off-sidebar">
						&nbsp;
					</a>
					<!-- end: NAVBAR COLLAPSE -->
				</header>
				<!-- end: TOP NAVBAR -->
				<div class="main-content" >
					<div class="wrap-content container" id="container">
						<!-- start: PAGE TITLE -->
						<section id="page-title">
							<div class="row">
								<div class="col-sm-8">
									<h1 class="mainTitle">Elements</h1>
									<span class="mainDescription">Over a dozen reusable components built to provide popovers, media objects, navigation, tooltips and much more. </span>
								</div>
								<ol class="breadcrumb">
									<li>
										<span>UI Elements</span>
									</li>
									<li class="active">
										<span>Elements</span>
									</li>
								</ol>
							</div>
						</section>
						<!-- end: PAGE TITLE -->
						<!-- start: LIST GROUP -->
						<div class="container-fluid container-fullw bg-white">
							<div class="row">
								<div class="col-md-12">
									<h5 class="over-title margin-bottom-15">List <span class="text-bold">Group</span></h5>
									<p>
										List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.
									</p>
									<div class="row">
										<div class="col-sm-6">
											<div class="panel panel-transparent">
												<div class="panel-heading">
													<div class="panel-title">
														Basic example with Badges
													</div>
												</div>
												<div class="panel-body">
													<p class="text-small">
														The most basic list group is simply an unordered list with list items, and the proper classes. Add the badges component to any list group item and it will automatically be positioned on the right.
													</p>
													<ul class="list-group">
														<li class="list-group-item">
															<span class="badge">14</span>
															Cras justo odio
														</li>
														<li class="list-group-item">
															<span class="badge">2</span>
															Dapibus ac facilisis in
														</li>
														<li class="list-group-item">
															<span class="badge">1</span>
															Morbi leo risus
														</li>
													</ul>
												</div>
											</div>
										</div>
										<div class="col-sm-6">
											<div class="panel panel-transparent">
												<div class="panel-heading">
													<div class="panel-title">
														Linked items
													</div>
												</div>
												<div class="panel-body">
													<p class="text-small">
														Linkify list group items by using anchor tags instead of list items (that also means a parent <code>&lt;div&gt;</code> instead of an <code>&lt;ul&gt;</code>). No need for individual parents around each element.
													</p>
													<div class="list-group">
														<a class="list-group-item active" href="#">
															Cras justo odio
														</a>
														<a class="list-group-item" href="#">
															Dapibus ac facilisis in
														</a>
														<a class="list-group-item" href="#">
															Porta ac consectetur ac
														</a>
													</div>
												</div>
											</div>
										</div>
										<div class="col-sm-6">
											<div class="panel panel-transparent">
												<div class="panel-heading">
													<div class="panel-title">
														Contextual classes
													</div>
												</div>
												<div class="panel-body">
													<p class="text-small">
														Use contextual classes to style list items, default or linked. Also includes <code>.active</code> state.
													</p>
													<div class="list-group">
														<a class="list-group-item list-group-item-success" href="#">
															Dapibus ac facilisis in
														</a>
														<a class="list-group-item list-group-item-info" href="#">
															Cras sit amet nibh libero
														</a>
														<a class="list-group-item list-group-item-warning" href="#">
															Porta ac consectetur ac
														</a>
														<a class="list-group-item list-group-item-danger" href="#">
															Vestibulum at eros
														</a>
													</div>
												</div>
											</div>
										</div>
										<div class="col-sm-6">
											<div class="panel panel-transparent">
												<div class="panel-heading">
													<div class="panel-title">
														Custom content
													</div>
												</div>
												<div class="panel-body">
													<p class="text-small">
														Add nearly any HTML within, even for linked list groups like the one below.
													</p>
													<div class="list-group">
														<a class="list-group-item active" href="#">
															<h5 class="list-group-item-heading">List group item heading</h5>
															<p class="list-group-item-text">
																Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
															</p>
														</a>
														<a class="list-group-item" href="#">
															<h5 class="list-group-item-heading">List group item heading</h5>
															<p class="list-group-item-text">
																Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
															</p>
														</a>
														<a class="list-group-item" href="#">
															<h5 class="list-group-item-heading">List group item heading</h5>
															<p class="list-group-item-text">
																Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
															</p>
														</a>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<!-- end: LIST GROUP -->
						<!-- start: TOOLTIPS -->
						<div class="container-fluid container-fullw">
							<div class="row">
								<div class="col-md-12">
									<h5 class="over-title margin-bottom-15"><span class="text-bold">Tooltips</span></h5>
									<p>
										Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use CSS3 for animations, and data-attributes for local title storage.
									</p>
									<div class="row">
										<div class="col-sm-6">
											<div class="panel panel-transparent">
												<div class="panel-heading">
													<div class="panel-title">
														Static Tooltip
													</div>
												</div>
												<div class="panel-body">
													<p class="text-small">
														Four options are available: top, right, bottom, and left aligned.
													</p>
													<div class="static-tooltip">
														<div role="tooltip" class="tooltip left">
															<div class="tooltip-arrow"></div>
															<div class="tooltip-inner">
																Tooltip on the left
															</div>
														</div>
														<div role="tooltip" class="tooltip top">
															<div class="tooltip-arrow"></div>
															<div class="tooltip-inner">
																Tooltip on the top
															</div>
														</div>
														<div role="tooltip" class="tooltip bottom">
															<div class="tooltip-arrow"></div>
															<div class="tooltip-inner">
																Tooltip on the bottom
															</div>
														</div>
														<div role="tooltip" class="tooltip right">
															<div class="tooltip-arrow"></div>
															<div class="tooltip-inner">
																Tooltip on the right
															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
										<div class="col-sm-6">
											<div class="panel panel-transparent">
												<div class="panel-heading">
													<div class="panel-title">
														Tooltip in buttons
													</div>
												</div>
												<div class="panel-body buttons-widget">
													<p class="text-small">
														The way to initialize all tooltips on a page would be to select them by their <code>data-toggle="tooltip"</code> attribute
													</p>
													<button title="" data-placement="left" data-toggle="tooltip" class="btn btn-primary" type="button" data-original-title="Tooltip on left">
														Tooltip on left
													</button>
													<button title="" data-placement="top" data-toggle="tooltip" class="btn btn-primary" type="button" data-original-title="Tooltip on top">
														Tooltip on top
													</button>
													<button title="" data-placement="bottom" data-toggle="tooltip" class="btn btn-primary" type="button" data-original-title="Tooltip on bottom">
														Tooltip on bottom
													</button>
													<button title="" data-placement="right" data-toggle="tooltip" class="btn btn-primary" type="button" data-original-title="Tooltip on right">
														Tooltip on right
													</button>
												</div>
											</div>
										</div>
										<div class="col-sm-12">
											<div class="panel panel-white">
												<div class="panel-body">
													<p class="text-small">
														Hover over the links below to see tooltips:
													</p>
													<p>
														Tincidunt lobortis feugiat vivamus at
														<a href="javascript:void(0)" data-placement="left" data-toggle="tooltip" data-original-title="On the Left!">
															left
														</a>
														eget
														arcu dictum varius duis at consectetur lorem. Vitae elementum curabitur
														<a href="javascript:void(0)" data-placement="right" data-toggle="tooltip" data-original-title="On the Right!">
															right
														</a>
														nunc sed velit dignissim sodales ut eu sem integer vitae. Turpis egestas
														<a href="javascript:void(0)" data-placement="bottom" data-toggle="tooltip" data-original-title="On the Bottom!">
															bottom
														</a>
														pharetra convallis posuere morbi leo urna,
														<a href="javascript:void(0)" data-placement="top" data-toggle="tooltip" data-original-title="On the Top!">
															top
														</a>
														at elementum eu, facilisis sed odio morbi quis commodo odio. In cursus
														<a href="javascript:void(0)" data-trigger="click" data-placement="top" data-toggle="tooltip" data-original-title="appears on click">
															click
														</a>
														turpis massa tincidunt dui ut.
													</p>
													<p>
														I can even contain HTML.
														<a href="javascript:void(0)" data-html="true" data-placement="top" data-toggle="tooltip" data-original-title="<div class='padding-10'><h3 class='text-white'>Html inside</h3>Tincidunt lobortis feugiat vivamus</div>">
															Check me out!
														</a>
													</p>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<!-- end: TOOLTIPS -->
						<!-- start: POPOVERS -->
						<div class="container-fluid container-fullw bg-white">
							<div class="row">
								<div class="col-md-12">
									<h5 class="over-title margin-bottom-15"><span class="text-bold">Popovers</span></h5>
									<p>
										Add small overlays of content, like those on the iPad, to any element for housing secondary information.
									</p>
									<div class="row">
										<div class="col-sm-6">
											<div class="panel panel-transparent">
												<div class="panel-heading">
													<div class="panel-title">
														Static Popover
													</div>
												</div>
												<div class="panel-body">
													<p class="text-small">
														Four options are available: top, right, bottom, and left aligned.
													</p>
													<label>
														Popover Type
													</label>
													<div class="radio clip-radio radio-primary">
														<input type="radio" name="popoverType" id="top" value="top" checked>
														<label for="top">
															Popover top
														</label>
													</div>
													<div class="radio clip-radio radio-primary">
														<input type="radio" name="popoverType" id="left" value="left">
														<label for="left">
															Popover left
														</label>
													</div>
													<div class="radio clip-radio radio-primary">
														<input type="radio" name="popoverType" id="right" value="right">
														<label for="right">
															Popover right
														</label>
													</div>
													<div class="radio clip-radio radio-primary">
														<input type="radio" name="popoverType" id="bottom" value="bottom">
														<label for="bottom">
															Popover bottom
														</label>
													</div>
													<div class="static-popover" id="static-popover">
														<div class="popover top">
															<div class="arrow"></div>
															<h3 class="popover-title">Popover top</h3>
															<div class="popover-content">
																<p>
																	Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
																</p>
															</div>
														</div>
														<div class="clearfix"></div>
													</div>
												</div>
											</div>
										</div>
										<div class="col-sm-6">
											<div class="panel panel-transparent">
												<div class="panel-heading">
													<div class="panel-title">
														Popover in buttons
													</div>
												</div>
												<div class="panel-body">
													<p class="text-small">
														The way to initialize all tooltips on a page would be to select them by their <code>data-toggle="popover"</code> attribute
													</p>
													<button title="" data-toggle="popover" data-placement="left" data-title="Popover on left" data-content="And here's some amazing content. It's very engaging. Right?" class="btn btn-primary btn-o">
														Popover on left
													</button>
													<button title="" data-toggle="popover" data-placement="top" data-title="Popover on top" data-content="And here's some amazing content. It's very engaging. Right?" class="btn btn-primary btn-o">
														Popover on top
													</button>
													<button title="" data-toggle="popover" data-placement="bottom" data-title="Popover on bottom" data-content="And here's some amazing content. It's very engaging. Right?" class="btn btn-primary btn-o">
														Popover on bottom
													</button>
													<button title="" data-toggle="popover" data-placement="right" data-title="Popover on right" data-content="And here's some amazing content. It's very engaging. Right?" class="btn btn-primary btn-o">
														Popover on right
													</button>
												</div>
											</div>
											<div class="panel panel-transparent">
												<div class="panel-heading">
													<div class="panel-title">
														Dismiss on next click
													</div>
												</div>
												<div class="panel-body">
													<p class="text-small">
														For proper cross-browser and cross-platform behavior, you must use the <code>&lt;a&gt;</code> tag, <i>not</i> the <code>&lt;button&gt;</code> tag, and you also must include a <code>tabindex</code> attribute.
													</p>
													<p>
														<a tabindex="0" class="btn btn-primary" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">
															Dismissible popover
														</a>
													</p>
												</div>
											</div>
											<div class="panel panel-transparent">
												<div class="panel-heading">
													<div class="panel-title">
														Others
													</div>
												</div>
												<div class="panel-body">
													<p class="text-small">
														Options can be passed via data attributes or JavaScript.
													</p>
													<p>
														<button title="" data-toggle="popover" data-placement="top" data-trigger="hover" data-title="Popover on hover" data-content="And here's some amazing content. It's very engaging. Right?" class="btn btn-primary btn-wide">
															hover
														</button>
														<button title="" data-toggle="popover" data-placement="top" data-html="true" data-content="<div class='padding-10 text-center'><h3>Html inside</h3>Tincidunt lobortis feugiat vivamus</div>" class="btn btn-primary btn-wide">
															html
														</button>
													</p>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<!-- end: POPOVERS -->
						<!-- start: PROGRESS BARS -->
						<div class="container-fluid container-fullw">
							<div class="row">
								<div class="col-md-12">
									<h5 class="over-title">Progress <span class="text-bold">Bars</span></h5>
									<p class="margin-bottom-30">
										Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.
									</p>
									<div class="alert alert-block alert-warning">
										Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox. Versions earlier than Internet Explorer 10 and Opera 12 do not support animations.
									</div>
									<div class="row">
										<div class="col-sm-12">
											<div class="panel panel-transparent">
												<div class="panel-heading">
													<div class="panel-title">
														Static Progress Bars
													</div>
												</div>
												<div class="panel-body">
													<p class="text-small">
														Progress bars use some of the same button and alert classes for consistent styles.
													</p>
													<div class="row">
														<div class="col-sm-4">
															<p>
																<h5>Basic</h5>
															</p>
															<div class="progress progress-xs">
																<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
																	<span class="sr-only"> 60% Complete</span>
																</div>
															</div>
															<div class="progress progress-xs">
																<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
																	<span class="sr-only"> 40% Complete</span>
																</div>
															</div>
															<div class="progress progress-xs">
																<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;">
																	<span class="sr-only"> 20% Complete</span>
																</div>
															</div>
															<div class="progress progress-xs">
																<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
																	<span class="sr-only"> 60% Complete</span>
																</div>
															</div>
															<div class="progress progress-xs">
																<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
																	<span class="sr-only"> 80% Complete</span>
																</div>
															</div>
														</div>
														<div class="col-sm-4">
															<p>
																<h5>Striped</h5>
															</p>
															<div class="progress progress-striped progress-xs">
																<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
																	<span class="sr-only"> 60% Complete (success)</span>
																</div>
															</div>
															<div class="progress progress-striped progress-xs">
																<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
																	<span class="sr-only"> 40% Complete</span>
																</div>
															</div>
															<div class="progress progress-striped progress-xs">
																<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;">
																	<span class="sr-only"> 20% Complete</span>
																</div>
															</div>
															<div class="progress progress-striped progress-xs">
																<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
																	<span class="sr-only"> 60% Complete</span>
																</div>
															</div>
															<div class="progress progress-striped progress-xs">
																<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
																	<span class="sr-only"> 80% Complete</span>
																</div>
															</div>
														</div>
														<div class="col-sm-4">
															<p>
																<h5>Animated</h5>
															</p>
															<div class="progress progress-striped active progress-xs">
																<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
																	<span class="sr-only"> 60% Complete (success)</span>
																</div>
															</div>
															<div class="progress progress-striped active progress-xs">
																<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
																	<span class="sr-only"> 40% Complete</span>
																</div>
															</div>
															<div class="progress progress-striped active progress-xs">
																<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;">
																	<span class="sr-only"> 20% Complete</span>
																</div>
															</div>
															<div class="progress progress-striped active progress-xs">
																<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
																	<span class="sr-only"> 60% Complete</span>
																</div>
															</div>
															<div class="progress progress-striped active progress-xs">
																<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
																	<span class="sr-only"> 80% Complete</span>
																</div>
															</div>
														</div>
														<div class="col-sm-4">
															<p>
																<h5>Sizes</h5>
															</p>
															<div class="progress progress-xs">
																<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
																	<span class="sr-only"> 60% Complete</span>
																</div>
															</div>
															<div class="progress progress-sm">
																<div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
																	<span class="sr-only"> 40% Complete</span>
																</div>
															</div>
															<div class="progress">
																<div class="progress-bar" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;">
																	<span class="sr-only"> 20% Complete</span>
																</div>
															</div>
														</div>
														<div class="col-sm-4">
															<p>
																<h5>With label</h5>
															</p>
															<div class="progress">
																<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
																	60%
																</div>
															</div>
															<div class="progress">
																<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="86" aria-valuemin="0" aria-valuemax="100" style="width: 86%;">
																	86/100
																</div>
															</div>
														</div>
														<div class="col-sm-4">
															<p>
																<h5>Stacked</h5>
															</p>
															<div class="progress">
																<div class="progress-bar progress-bar-success" style="width: 35%">
																	<span class="sr-only"> 35% Complete (success)</span>
																</div>
																<div class="progress-bar progress-bar-warning" style="width: 20%">
																	<span class="sr-only"> 20% Complete (warning)</span>
																</div>
																<div class="progress-bar progress-bar-danger" style="width: 10%">
																	<span class="sr-only"> 10% Complete (danger)</span>
																</div>
															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
										<div class="col-sm-12">
											<div class="panel panel-transparent">
												<div class="panel-heading">
													<div class="panel-title">
														Display text and animations
													</div>
												</div>
												<div class="panel-body">
													<p class="text-small">
														jQuery plugin for twitter bootstrap's progressbar for displaying text and animations. Add class <code>.progress-animated</code> to your progress-bar.
													</p>
													<div class="row">
														<div class="col-sm-6">
															<button class="btn btn-primary btn-o margin-bottom-10 active-progressbar" type="button">
																Active Progressbars
															</button>
															<button class="btn btn-danger btn-o margin-bottom-10 reset-progressbar" type="button">
																Reset
															</button>
															<p>
																Default settings
															</p>
															<div class="progress progress-xs progress-animated">
																<div class="progress-bar" role="progressbar" data-transitiongoal="80"></div>
															</div>
															<p>
																Filled text
															</p>
															<div class="progress progress-animated">
																<div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal="60" data-display-text="fill"></div>
															</div>
															<p>
																Filled text (nonpercentage)
															</p>
															<div class="progress progress-animated">
																<div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal="40" data-display-text="fill" data-use-percentage="false"></div>
															</div>
															<p>
																Transition delay
															</p>
															<div class="progress progress-animated">
																<div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal="80" data-transition-delay="1000"></div>
															</div>
														</div>
														<div class="col-sm-6 height-250">
															<p class="margin-bottom-20">
																Vertical Progress Bars
															</p>
															<div class="progress progress-animated vertical bottom">
																<div class="progress-bar" role="progressbar" data-transitiongoal="80"></div>
															</div>
															<div class="progress progress-animated vertical bottom">
																<div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal="60" data-display-text="fill"></div>
															</div>
															<div class="progress progress-animated vertical bottom">
																<div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal="40" data-display-text="fill" data-use-percentage="false"></div>
															</div>
															<div class="progress progress-animated vertical bottom">
																<div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal="80" data-transition-delay="1000"></div>
															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<!-- end: PROGRESS BARS -->
						<!-- start: PAGINATION -->
						<div class="container-fluid container-fullw bg-white">
							<div class="row">
								<div class="col-md-12">
									<h5 class="over-title margin-bottom-15"><span class="text-bold">Pagination</span></h5>
									<p>
										Provide pagination links for your site or app with the multi-page pagination component, or the simpler pager alternative.
										Simple pagination, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.
									</p>
									<div class="row">
										<div class="col-sm-6">
											<div class="panel panel-transparent">
												<div class="panel-heading">
													<div class="panel-title">
														Default Pagination
													</div>
												</div>
												<div class="panel-body">
													<p class="text-small">
														Simple pagination, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.
													</p>
													<div>
														<ul class="pagination margin-bottom-10">
															<li>
																<a href="#">
																	<i class="ti-arrow-left"></i>
																</a>
															</li>
															<li>
																<a href="#">
																	1
																</a>
															</li>
															<li>
																<a href="#">
																	2
																</a>
															</li>
															<li>
																<a href="#">
																	3
																</a>
															</li>
															<li>
																<a href="#">
																	4
																</a>
															</li>
															<li>
																<a href="#">
																	<i class="ti-arrow-right"></i>
																</a>
															</li>
														</ul>
													</div>
													<p class="text-small">
														Fancy larger or smaller pagination? Add <code>.pagination-lg</code> or <code>.pagination-sm</code> for additional sizes.
													</p>
													<div>
														<ul class="pagination pagination-lg margin-bottom-10">
															<li>
																<a href="#">
																	<i class="ti-arrow-left"></i>
																</a>
															</li>
															<li>
																<a href="#">
																	1
																</a>
															</li>
															<li>
																<a href="#">
																	2
																</a>
															</li>
															<li>
																<a href="#">
																	3
																</a>
															</li>
															<li>
																<a href="#">
																	<i class="ti-arrow-right"></i>
																</a>
															</li>
														</ul>
													</div>
													<div>
														<ul class="pagination pagination-sm margin-bottom-10">
															<li>
																<a href="#">
																	<i class="ti-arrow-left"></i>
																</a>
															</li>
															<li>
																<a href="#">
																	1
																</a>
															</li>
															<li>
																<a href="#">
																	2
																</a>
															</li>
															<li>
																<a href="#">
																	3
																</a>
															</li>
															<li>
																<a href="#">
																	4
																</a>
															</li>
															<li>
																<a href="#">
																	<i class="ti-arrow-right"></i>
																</a>
															</li>
														</ul>
													</div>
												</div>
											</div>
										</div>
										<div class="col-sm-6">
											<div class="panel panel-transparent">
												<div class="panel-heading">
													<div class="panel-title">
														Colorful
													</div>
												</div>
												<div class="panel-body">
													<p class="text-small">
														Use any of the available button classes to quickly create a styled pagination.
													</p>
													<div>
														<ul class="pagination pagination-blue margin-bottom-10">
															<li class="disabled">
																<a href="#"><i class="ti-angle-left"></i></a>
															</li>
															<li class="active">
																<a href="#">
																	1
																</a>
															</li>
															<li>
																<a href="#">
																	2
																</a>
															</li>
															<li>
																<a href="#">
																	3
																</a>
															</li>
															<li>
																<a href="#">
																	4
																</a>
															</li>
															<li>
																<a href="#"><i class="ti-angle-right"></i></a>
															</li>
														</ul>
													</div>
													<div>
														<ul class="pagination pagination-green margin-bottom-10">
															<li class="disabled">
																<a href="#"><i class="ti-angle-left"></i></a>
															</li>
															<li class="active">
																<a href="#">
																	1
																</a>
															</li>
															<li>
																<a href="#">
																	2
																</a>
															</li>
															<li>
																<a href="#">
																	3
																</a>
															</li>
															<li>
																<a href="#">
																	4
																</a>
															</li>
															<li>
																<a href="#"><i class="ti-angle-right"></i></a>
															</li>
														</ul>
													</div>
													<div>
														<ul class="pagination pagination-red margin-bottom-10">
															<li class="disabled">
																<a href="#"><i class="ti-angle-left"></i></a>
															</li>
															<li class="active">
																<a href="#">
																	1
																</a>
															</li>
															<li>
																<a href="#">
																	2
																</a>
															</li>
															<li>
																<a href="#">
																	3
																</a>
															</li>
															<li>
																<a href="#">
																	4
																</a>
															</li>
															<li>
																<a href="#"><i class="ti-angle-right"></i></a>
															</li>
														</ul>
													</div>
												</div>
											</div>
										</div>
									</div>
									<div class="row">
										<div class="col-sm-12">
											<div class="panel panel-transparent">
												<div class="panel-heading">
													<div class="panel-title">
														Dynamic Pagination
													</div>
												</div>
												<div class="panel-body">
													<p class="text-small">
														This jQuery plugin simplifies the usage of Bootstrap Pagintion. It uses appropriate classes: <code>.pagination</code> (you change this one), <code>.active</code> and <code>.disabled</code>.
														Check out the demo.
													</p>
													<div class="row">
														<div class="col-sm-6">
															<p>
																Default
															</p>
															<div>
																<div id="page-content" class="well">
																	Page 1
																</div>
																<ul id="pagination-demo" class="pagination-sm"></ul>
															</div>
															<p>
																URL page link
															</p>
															<div>
																<div id="page-content-2" class="well">
																	Page 1
																</div>
																<ul id="pagination-demo-2" class="pagination-sm"></ul>
															</div>
														</div>
														<div class="col-sm-6">
															<p>
																Synchronized pagination elements
															</p>
															<div>
																<ul class="pagination-sm pagination-demo-3"></ul>
																<div id="page-content-3" class="well">
																	Page 1
																</div>
																<ul class="pagination-sm pagination-demo-3"></ul>
															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<!-- end: PAGINATION -->
						<!-- start: LABELS AND BADGES -->
						<div class="container-fluid container-fullw">
							<div class="row">
								<div class="col-md-12">
									<h5 class="over-title">Labels and <span class="text-bold">Badges</span></h5>
									<p>
										Using Twitter Bootstrap, you may create inline labels, i.e. Label and annotate text and badges, i.e. indicators and unread counts.
									</p>
									<div class="row">
										<div class="col-sm-6">
											<div class="panel panel-white">
												<div class="panel-heading">
													<div class="panel-title">
														Available labels
													</div>
												</div>
												<div class="panel-body">
													<p class="text-small">
														Add any of the below mentioned modifier classes to change the appearance of a label.
													</p>
													<table class="table">
														<thead>
															<tr>
																<th>Labels</th>
																<th>Class</th>
															</tr>
														</thead>
														<tbody>
															<tr>
																<td><span class="label label-default"> Default</span></td>
																<td><code> label label-default </code></td>
															</tr>
															<tr>
																<td><span class="label label-success"> Success</span></td>
																<td><code> label label-success </code></td>
															</tr>
															<tr>
																<td><span class="label label-warning"> Warning</span></td>
																<td><code> label label-warning; </code></td>
															</tr>
															<tr>
																<td><span class="label label-danger"> Danger</span></td>
																<td><code> label label-danger </code></td>
															</tr>
															<tr>
																<td><span class="label label-info"> Info</span></td>
																<td><code> label label-info </code></td>
															</tr>
															<tr>
																<td><span class="label label-inverse"> Inverse</span></td>
																<td><code> label label-inverse </code></td>
															</tr>
														</tbody>
													</table>
												</div>
											</div>
										</div>
										<div class="col-sm-6">
											<div class="panel panel-white">
												<div class="panel-heading">
													<div class="panel-title">
														Available badges
													</div>
												</div>
												<div class="panel-body">
													<p class="text-small">
														Easily highlight new or unread items by adding a <code>&lt;span class="badge"&gt;</code> to links, Bootstrap navs, and more.
													</p>
													<table class="table">
														<thead>
															<tr>
																<th class="hidden-xs">Name</th>
																<th>Example</th>
																<th>Class</th>
															</tr>
														</thead>
														<tbody>
															<tr>
																<td class="hidden-xs"> Default </td>
																<td><span class="badge"> 1</span></td>
																<td><code> badge badge-default </code></td>
															</tr>
															<tr>
																<td class="hidden-xs"> Success </td>
																<td><span class="badge badge-success"> 2</span></td>
																<td><code> badge badge-success </code></td>
															</tr>
															<tr>
																<td class="hidden-xs"> Warning </td>
																<td><span class="badge badge-warning"> 4</span></td>
																<td><code> badge badge-warning </code></td>
															</tr>
															<tr>
																<td class="hidden-xs"> Danger </td>
																<td><span class="badge badge-danger"> 6</span></td>
																<td><code> badge badge-danger </code></td>
															</tr>
															<tr>
																<td class="hidden-xs"> Info </td>
																<td><span class="badge badge-info"> 8</span></td>
																<td><code> badge badge-info </code></td>
															</tr>
															<tr>
																<td class="hidden-xs"> Inverse </td>
																<td><span class="badge badge-inverse"> 10</span></td>
																<td><code> badge badge-inverse </code></td>
															</tr>
														</tbody>
													</table>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<!-- end: LABELS AND BADGES -->
						<!-- start: RATING -->
						<div class="container-fluid container-fullw bg-white">
							<div class="row">
								<div class="col-md-12">
									<h5 class="over-title margin-bottom-15"><span class="text-bold">Rating</span></h5>
									<p>
										Bootstrap Rating is a jQuery plugin that creates a rating control that uses Bootstrap glyphicons for rating symbols.
									</p>
									<div class="row">
										<div class="col-sm-6">
											<div class="panel panel-transparent">
												<div class="panel-heading">
													<div class="panel-title">
														Options
													</div>
												</div>
												<div class="panel-body">
													<p class="text-small">
														Default
													</p>
													<div class="margin-bottom-15 text-extra-large">
														<input type="hidden" class="rating" data-stop="10"/>
														<span class="label label-success"></span>
													</div>
													<p class="text-small">
														Half rating
													</p>
													<div class="margin-bottom-15 text-extra-large">
														<input type="hidden" class="rating" data-fractions="2" data-stop="10"/>
														<span class="label label-success"></span>
													</div>
													<p class="text-small">
														Customize tooltips
													</p>
													<div class="margin-bottom-15 text-extra-large">
														<input type="hidden" class="rating-tooltip" data-stop="10"/>
														<span class="label label-success"></span>
													</div>
													<p class="text-small">
														Readonly rating with a value
													</p>
													<div class="margin-bottom-15 text-extra-large">
														<input type="hidden" class="rating" readonly="readonly" value="4.5" data-stop="10"/>
														<span class="label label-success"></span>
													</div>
												</div>
											</div>
										</div>
										<div class="col-sm-6">
											<div class="panel panel-transparent">
												<div class="panel-heading">
													<div class="panel-title">
														Custom icons
													</div>
												</div>
												<div class="panel-body">
													<p class="text-small">
														Four options are available: top, right, bottom, and left aligned.
													</p>
													<div class="margin-bottom-30 text-extra-large">
														<input type="hidden" class="rating-tooltip" data-filled="fa fa-star margin-right-5 text-yellow" data-empty="fa fa-star-o margin-right-5"/>
														<span class="label label-success"></span>
													</div>
													<div class="margin-bottom-15 text-extra-large">
														<input type="hidden" class="rating-tooltip" data-filled="fa fa-heart margin-right-5 text-red" data-empty="fa fa-heart-o margin-right-5" data-stop="10"/>
														<span class="label label-success"></span>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<!-- end: RATING -->
					</div>
				</div>
			</div>
			<!-- start: FOOTER -->
			<footer>
				<div class="footer-inner">
					<div class="pull-left">
						&copy; <span class="current-year"></span><span class="text-bold text-uppercase">ClipTheme</span>. <span>All rights reserved</span>
					</div>
					<div class="pull-right">
						<span class="go-top"><i class="ti-angle-up"></i></span>
					</div>
				</div>
			</footer>
			<!-- end: FOOTER -->
			<!-- start: OFF-SIDEBAR -->
			<div id="off-sidebar" class="sidebar">
				<div class="sidebar-wrapper">
					<ul class="nav nav-tabs nav-justified">
						<li class="active">
							<a href="#off-users" aria-controls="off-users" role="tab" data-toggle="tab">
								<i class="ti-comments"></i>
							</a>
						</li>
						<li>
							<a href="#off-favorites" aria-controls="off-favorites" role="tab" data-toggle="tab">
								<i class="ti-heart"></i>
							</a>
						</li>
						<li>
							<a href="#off-settings" aria-controls="off-settings" role="tab" data-toggle="tab">
								<i class="ti-settings"></i>
							</a>
						</li>
					</ul>
					<div class="tab-content">
						<div role="tabpanel" class="tab-pane active" id="off-users">
							<div id="users" toggleable active-class="chat-open">
								<div class="users-list">
									<div class="sidebar-content perfect-scrollbar">
										<h5 class="sidebar-title">On-line</h5>
										<ul class="media-list">
											<li class="media">
												<a data-toggle-class="chat-open" data-toggle-target="#users" href="#">
													<i class="fa fa-circle status-online"></i>
													<img alt="..." src="assets/images/avatar-2.jpg" class="media-object">
													<div class="media-body">
														<h4 class="media-heading">Nicole Bell</h4>
														<span> Content Designer </span>
													</div>
												</a>
											</li>
											<li class="media">
												<a data-toggle-class="chat-open" data-toggle-target="#users" href="#">
													<div class="user-label">
														<span class="label label-success">3</span>
													</div>
													<i class="fa fa-circle status-online"></i>
													<img alt="..." src="assets/images/avatar-3.jpg" class="media-object">
													<div class="media-body">
														<h4 class="media-heading">Steven Thompson</h4>
														<span> Visual Designer </span>
													</div>
												</a>
											</li>
											<li class="media">
												<a data-toggle-class="chat-open" data-toggle-target="#users" href="#">
													<i class="fa fa-circle status-online"></i>
													<img alt="..." src="assets/images/avatar-4.jpg" class="media-object">
													<div class="media-body">
														<h4 class="media-heading">Ella Patterson</h4>
														<span> Web Editor </span>
													</div>
												</a>
											</li>
											<li class="media">
												<a data-toggle-class="chat-open" data-toggle-target="#users" href="#">
													<i class="fa fa-circle status-online"></i>
													<img alt="..." src="assets/images/avatar-5.jpg" class="media-object">
													<div class="media-body">
														<h4 class="media-heading">Kenneth Ross</h4>
														<span> Senior Designer </span>
													</div>
												</a>
											</li>
										</ul>
										<h5 class="sidebar-title">Off-line</h5>
										<ul class="media-list">
											<li class="media">
												<a data-toggle-class="chat-open" data-toggle-target="#users" href="#">
													<img alt="..." src="assets/images/avatar-6.jpg" class="media-object">
													<div class="media-body">
														<h4 class="media-heading">Nicole Bell</h4>
														<span> Content Designer </span>
													</div>
												</a>
											</li>
											<li class="media">
												<a data-toggle-class="chat-open" data-toggle-target="#users" href="#">
													<div class="user-label">
														<span class="label label-success">3</span>
													</div>
													<img alt="..." src="assets/images/avatar-7.jpg" class="media-object">
													<div class="media-body">
														<h4 class="media-heading">Steven Thompson</h4>
														<span> Visual Designer </span>
													</div>
												</a>
											</li>
											<li class="media">
												<a data-toggle-class="chat-open" data-toggle-target="#users" href="#">
													<img alt="..." src="assets/images/avatar-8.jpg" class="media-object">
													<div class="media-body">
														<h4 class="media-heading">Ella Patterson</h4>
														<span> Web Editor </span>
													</div>
												</a>
											</li>
											<li class="media">
												<a data-toggle-class="chat-open" data-toggle-target="#users" href="#">
													<img alt="..." src="assets/images/avatar-9.jpg" class="media-object">
													<div class="media-body">
														<h4 class="media-heading">Kenneth Ross</h4>
														<span> Senior Designer </span>
													</div>
												</a>
											</li>
											<li class="media">
												<a data-toggle-class="chat-open" data-toggle-target="#users" href="#">
													<img alt="..." src="assets/images/avatar-10.jpg" class="media-object">
													<div class="media-body">
														<h4 class="media-heading">Ella Patterson</h4>
														<span> Web Editor </span>
													</div>
												</a>
											</li>
											<li class="media">
												<a data-toggle-class="chat-open" data-toggle-target="#users" href="#">
													<img alt="..." src="assets/images/avatar-5.jpg" class="media-object">
													<div class="media-body">
														<h4 class="media-heading">Kenneth Ross</h4>
														<span> Senior Designer </span>
													</div>
												</a>
											</li>
										</ul>
									</div>
								</div>
								<div class="user-chat">
									<div class="chat-content">
										<div class="sidebar-content perfect-scrollbar">
											<a class="sidebar-back pull-left" href="#" data-toggle-class="chat-open" data-toggle-target="#users"><i class="ti-angle-left"></i> <span>Back</span></a>
											<ol class="discussion">
												<li class="messages-date">
													Sunday, Feb 9, 12:58
												</li>
												<li class="self">
													<div class="message">
														<div class="message-name">
															Peter Clark
														</div>
														<div class="message-text">
															Hi, Nicole
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-1.jpg" alt="">
														</div>
													</div>
													<div class="message">
														<div class="message-name">
															Nicole Bell
														</div>
														<div class="message-text">
															How are you?
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-1.jpg" alt="">
														</div>
													</div>
												</li>
												<li class="other">
													<div class="message">
														<div class="message-name">
															Nicole Bell
														</div>
														<div class="message-text">
															Hi, i am good
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-2.jpg" alt="">
														</div>
													</div>
												</li>
												<li class="self">
													<div class="message">
														<div class="message-name">
															Peter Clark
														</div>
														<div class="message-text">
															Glad to see you ;)
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-1.jpg" alt="">
														</div>
													</div>
												</li>
												<li class="messages-date">
													Sunday, Feb 9, 13:10
												</li>
												<li class="other">
													<div class="message">
														<div class="message-name">
															Nicole Bell
														</div>
														<div class="message-text">
															What do you think about my new Dashboard?
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-2.jpg" alt="">
														</div>
													</div>
												</li>
												<li class="messages-date">
													Sunday, Feb 9, 15:28
												</li>
												<li class="other">
													<div class="message">
														<div class="message-name">
															Nicole Bell
														</div>
														<div class="message-text">
															Alo...
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-2.jpg" alt="">
														</div>
													</div>
													<div class="message">
														<div class="message-name">
															Nicole Bell
														</div>
														<div class="message-text">
															Are you there?
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-2.jpg" alt="">
														</div>
													</div>
												</li>
												<li class="self">
													<div class="message">
														<div class="message-name">
															Peter Clark
														</div>
														<div class="message-text">
															Hi, i am here
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-1.jpg" alt="">
														</div>
													</div>
													<div class="message">
														<div class="message-name">
															Nicole Bell
														</div>
														<div class="message-text">
															Your Dashboard is great
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-1.jpg" alt="">
														</div>
													</div>
												</li>
												<li class="messages-date">
													Friday, Feb 7, 23:39
												</li>
												<li class="other">
													<div class="message">
														<div class="message-name">
															Nicole Bell
														</div>
														<div class="message-text">
															How does the binding and digesting work in AngularJS?, Peter?
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-2.jpg" alt="">
														</div>
													</div>
												</li>
												<li class="self">
													<div class="message">
														<div class="message-name">
															Peter Clark
														</div>
														<div class="message-text">
															oh that's your question?
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-1.jpg" alt="">
														</div>
													</div>
													<div class="message">
														<div class="message-name">
															Peter Clark
														</div>
														<div class="message-text">
															little reduntant, no?
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-1.jpg" alt="">
														</div>
													</div>
													<div class="message">
														<div class="message-name">
															Peter Clark
														</div>
														<div class="message-text">
															literally we get the question daily
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-1.jpg" alt="">
														</div>
													</div>
												</li>
												<li class="other">
													<div class="message">
														<div class="message-name">
															Nicole Bell
														</div>
														<div class="message-text">
															I know. I, however, am not a nerd, and want to know
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-2.jpg" alt="">
														</div>
													</div>
												</li>
												<li class="self">
													<div class="message">
														<div class="message-name">
															Peter Clark
														</div>
														<div class="message-text">
															for this type of question, wouldn't it be better to try Google?
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-1.jpg" alt="">
														</div>
													</div>
												</li>
												<li class="other">
													<div class="message">
														<div class="message-name">
															Nicole Bell
														</div>
														<div class="message-text">
															Lucky for us :)
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-2.jpg" alt="">
														</div>
													</div>
												</li>
											</ol>
										</div>
									</div>
									<div class="message-bar">
										<div class="message-inner">
											<a class="link icon-only" href="#"><i class="fa fa-camera"></i></a>
											<div class="message-area">
												<textarea placeholder="Message"></textarea>
											</div>
											<a class="link" href="#">
												Send
											</a>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div role="tabpanel" class="tab-pane" id="off-favorites">
							<div class="users-list">
								<div class="sidebar-content perfect-scrollbar">
									<h5 class="sidebar-title">Favorites</h5>
									<ul class="media-list">
										<li class="media">
											<a href="#">
												<img alt="..." src="assets/images/avatar-7.jpg" class="media-object">
												<div class="media-body">
													<h4 class="media-heading">Nicole Bell</h4>
													<span> Content Designer </span>
												</div>
											</a>
										</li>
										<li class="media">
											<a href="#">
												<div class="user-label">
													<span class="label label-success">3</span>
												</div>
												<img alt="..." src="assets/images/avatar-6.jpg" class="media-object">
												<div class="media-body">
													<h4 class="media-heading">Steven Thompson</h4>
													<span> Visual Designer </span>
												</div>
											</a>
										</li>
										<li class="media">
											<a href="#">
												<img alt="..." src="assets/images/avatar-10.jpg" class="media-object">
												<div class="media-body">
													<h4 class="media-heading">Ella Patterson</h4>
													<span> Web Editor </span>
												</div>
											</a>
										</li>
										<li class="media">
											<a href="#">
												<img alt="..." src="assets/images/avatar-2.jpg" class="media-object">
												<div class="media-body">
													<h4 class="media-heading">Kenneth Ross</h4>
													<span> Senior Designer </span>
												</div>
											</a>
										</li>
										<li class="media">
											<a href="#">
												<img alt="..." src="assets/images/avatar-4.jpg" class="media-object">
												<div class="media-body">
													<h4 class="media-heading">Ella Patterson</h4>
													<span> Web Editor </span>
												</div>
											</a>
										</li>
										<li class="media">
											<a href="#">
												<img alt="..." src="assets/images/avatar-5.jpg" class="media-object">
												<div class="media-body">
													<h4 class="media-heading">Kenneth Ross</h4>
													<span> Senior Designer </span>
												</div>
											</a>
										</li>
									</ul>
								</div>
							</div>
						</div>
						<div role="tabpanel" class="tab-pane" id="off-settings">
							<div class="sidebar-content perfect-scrollbar">
								<h5 class="sidebar-title">General Settings</h5>
								<ul class="media-list">
									<li class="media">
										<div class="padding-10">
											<div class="display-table-cell">
												<input type="checkbox" class="js-switch" checked />
											</div>
											<span class="display-table-cell vertical-align-middle padding-left-10">Enable Notifications</span>
										</div>
									</li>
									<li class="media">
										<div class="padding-10">
											<div class="display-table-cell">
												<input type="checkbox" class="js-switch" />
											</div>
											<span class="display-table-cell vertical-align-middle padding-left-10">Show your E-mail</span>
										</div>
									</li>
									<li class="media">
										<div class="padding-10">
											<div class="display-table-cell">
												<input type="checkbox" class="js-switch" checked />
											</div>
											<span class="display-table-cell vertical-align-middle padding-left-10">Show Offline Users</span>
										</div>
									</li>
									<li class="media">
										<div class="padding-10">
											<div class="display-table-cell">
												<input type="checkbox" class="js-switch" checked />
											</div>
											<span class="display-table-cell vertical-align-middle padding-left-10">E-mail Alerts</span>
										</div>
									</li>
									<li class="media">
										<div class="padding-10">
											<div class="display-table-cell">
												<input type="checkbox" class="js-switch" />
											</div>
											<span class="display-table-cell vertical-align-middle padding-left-10">SMS Alerts</span>
										</div>
									</li>
								</ul>
								<div class="save-options">
									<button class="btn btn-success">
										<i class="icon-settings"></i><span>Save Changes</span>
									</button>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- end: OFF-SIDEBAR -->
			<!-- start: SETTINGS -->
			<div class="settings panel panel-default hidden-xs hidden-sm" id="settings">
				<button ct-toggle="toggle" data-toggle-class="active" data-toggle-target="#settings" class="btn btn-default">
					<i class="fa fa-spin fa-gear"></i>
				</button>
				<div class="panel-heading">
					Style Selector
				</div>
				<div class="panel-body">
					<!-- start: FIXED HEADER -->
					<div class="setting-box clearfix">
						<span class="setting-title pull-left"> Fixed header</span>
						<span class="setting-switch pull-right">
							<input type="checkbox" class="js-switch" id="fixed-header" />
						</span>
					</div>
					<!-- end: FIXED HEADER -->
					<!-- start: FIXED SIDEBAR -->
					<div class="setting-box clearfix">
						<span class="setting-title pull-left">Fixed sidebar</span>
						<span class="setting-switch pull-right">
							<input type="checkbox" class="js-switch" id="fixed-sidebar" />
						</span>
					</div>
					<!-- end: FIXED SIDEBAR -->
					<!-- start: CLOSED SIDEBAR -->
					<div class="setting-box clearfix">
						<span class="setting-title pull-left">Closed sidebar</span>
						<span class="setting-switch pull-right">
							<input type="checkbox" class="js-switch" id="closed-sidebar" />
						</span>
					</div>
					<!-- end: CLOSED SIDEBAR -->
					<!-- start: FIXED FOOTER -->
					<div class="setting-box clearfix">
						<span class="setting-title pull-left">Fixed footer</span>
						<span class="setting-switch pull-right">
							<input type="checkbox" class="js-switch" id="fixed-footer" />
						</span>
					</div>
					<!-- end: FIXED FOOTER -->
					<!-- start: THEME SWITCHER -->
					<div class="colors-row setting-box">
						<div class="color-theme theme-1">
							<div class="color-layout">
								<label>
									<input type="radio" name="setting-theme" value="theme-1">
									<span class="ti-check"></span>
									<span class="split header"> <span class="color th-header"></span> <span class="color th-collapse"></span> </span>
									<span class="split"> <span class="color th-sidebar"><i class="element"></i></span> <span class="color th-body"></span> </span>
								</label>
							</div>
						</div>
						<div class="color-theme theme-2">
							<div class="color-layout">
								<label>
									<input type="radio" name="setting-theme" value="theme-2">
									<span class="ti-check"></span>
									<span class="split header"> <span class="color th-header"></span> <span class="color th-collapse"></span> </span>
									<span class="split"> <span class="color th-sidebar"><i class="element"></i></span> <span class="color th-body"></span> </span>
								</label>
							</div>
						</div>
					</div>
					<div class="colors-row setting-box">
						<div class="color-theme theme-3">
							<div class="color-layout">
								<label>
									<input type="radio" name="setting-theme" value="theme-3">
									<span class="ti-check"></span>
									<span class="split header"> <span class="color th-header"></span> <span class="color th-collapse"></span> </span>
									<span class="split"> <span class="color th-sidebar"><i class="element"></i></span> <span class="color th-body"></span> </span>
								</label>
							</div>
						</div>
						<div class="color-theme theme-4">
							<div class="color-layout">
								<label>
									<input type="radio" name="setting-theme" value="theme-4">
									<span class="ti-check"></span>
									<span class="split header"> <span class="color th-header"></span> <span class="color th-collapse"></span> </span>
									<span class="split"> <span class="color th-sidebar"><i class="element"></i></span> <span class="color th-body"></span> </span>
								</label>
							</div>
						</div>
					</div>
					<div class="colors-row setting-box">
						<div class="color-theme theme-5">
							<div class="color-layout">
								<label>
									<input type="radio" name="setting-theme" value="theme-5">
									<span class="ti-check"></span>
									<span class="split header"> <span class="color th-header"></span> <span class="color th-collapse"></span> </span>
									<span class="split"> <span class="color th-sidebar"><i class="element"></i></span> <span class="color th-body"></span> </span>
								</label>
							</div>
						</div>
						<div class="color-theme theme-6">
							<div class="color-layout">
								<label>
									<input type="radio" name="setting-theme" value="theme-6">
									<span class="ti-check"></span>
									<span class="split header"> <span class="color th-header"></span> <span class="color th-collapse"></span> </span>
									<span class="split"> <span class="color th-sidebar"><i class="element"></i></span> <span class="color th-body"></span> </span>
								</label>
							</div>
						</div>
					</div>
					<!-- end: THEME SWITCHER -->
				</div>
			</div>
			<!-- end: SETTINGS -->
		</div>
		<!-- start: MAIN JAVASCRIPTS -->
		<script src="vendor/jquery/jquery.min.js"></script>
		<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
		<script src="vendor/modernizr/modernizr.js"></script>
		<script src="vendor/jquery-cookie/jquery.cookie.js"></script>
		<script src="vendor/perfect-scrollbar/perfect-scrollbar.min.js"></script>
		<script src="vendor/switchery/switchery.min.js"></script>
		<!-- end: MAIN JAVASCRIPTS -->
		<!-- start: JAVASCRIPTS REQUIRED FOR THIS PAGE ONLY -->
		<script src="vendor/bootstrap-progressbar/bootstrap-progressbar.min.js"></script>
		<script src="vendor/twbs-pagination/jquery.twbsPagination.min.js"></script>
		<script src="vendor/bootstrap-rating/bootstrap-rating.min.js"></script>
		<!-- end: JAVASCRIPTS REQUIRED FOR THIS PAGE ONLY -->
		<!-- start: CLIP-TWO JAVASCRIPTS -->
		<script src="assets/js/main.js"></script>
		<!-- start: JavaScript Event Handlers for this page -->
		<script src="assets/js/ui-elements.js"></script>
		<script>
			jQuery(document).ready(function() {
				Main.init();
				UIElements.init();
			});
		</script>
		<!-- end: JavaScript Event Handlers for this page -->
		<!-- end: CLIP-TWO JAVASCRIPTS -->
	</body>
</html>
